```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OAuth开放授权协议完全指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        :root {
            --primary: #4F46E5;
            --primary-dark: #4338CA;
            --secondary: #10B981;
            --dark: #1F2937;
            --light: #F3F4F6;
        }
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
            background-color: #f9fafb;
        }
        .hero {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
        }
        .card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .highlight {
            position: relative;
        }
        .highlight:before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 30%;
            background-color: rgba(79, 70, 229, 0.2);
            z-index: -1;
        }
        .mermaid {
            background-color: white;
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .code-block {
            background-color: #1E293B;
            color: #E2E8F0;
            border-radius: 0.5rem;
            padding: 1.5rem;
            position: relative;
        }
        .code-block:before {
            content: attr(data-lang);
            position: absolute;
            top: 0;
            right: 1rem;
            background-color: rgba(255,255,255,0.1);
            color: #94A3B8;
            padding: 0.25rem 0.5rem;
            border-radius: 0 0 0.25rem 0.25rem;
            font-size: 0.75rem;
            text-transform: uppercase;
        }
        .quote {
            border-left: 4px solid var(--primary);
            background-color: rgba(79, 70, 229, 0.05);
            padding: 1.5rem;
            border-radius: 0 0.5rem 0.5rem 0;
        }
        .step {
            counter-increment: step-counter;
            position: relative;
            padding-left: 3rem;
            margin-bottom: 1.5rem;
        }
        .step:before {
            content: counter(step-counter);
            position: absolute;
            left: 0;
            top: 0;
            background-color: var(--primary);
            color: white;
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <section class="hero py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4">OAuth 2.0</h1>
                    <h2 class="text-2xl md:text-3xl font-semibold mb-6">开放授权协议完全指南</h2>
                    <p class="text-lg opacity-90 mb-8">掌握现代Web应用认证授权的核心机制，实现安全便捷的第三方登录功能</p>
                    <div class="flex space-x-4">
                        <a href="#what-is-oauth" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">开始学习</a>
                        <a href="#baidu-example" class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-indigo-600 transition duration-300">百度示例</a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-full max-w-md">
                        <div class="absolute -top-6 -left-6 w-32 h-32 bg-indigo-300 rounded-full opacity-20"></div>
                        <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-indigo-400 rounded-full opacity-20"></div>
                        <div class="relative bg-white p-6 rounded-xl shadow-xl">
                            <div class="flex items-center mb-4">
                                <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
                                <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
                                <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                            </div>
                            <div class="code-block" data-lang="http">
                                GET /oauth/authorize?response_type=code
                                &client_id=CLIENT_ID
                                &redirect_uri=CALLBACK_URL
                                &scope=read_profile
                            </div>
                            <div class="mt-4 text-sm text-gray-600">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-arrow-right text-indigo-500 mr-2"></i>
                                    <span>用户授权</span>
                                </div>
                                <div class="flex items-center">
                                    <i class="fas fa-exchange-alt text-indigo-500 mr-2"></i>
                                    <span>获取访问令牌</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-6xl py-12 px-4 md:px-0">
        <!-- What is OAuth -->
        <section id="what-is-oauth" class="mb-20 scroll-mt-16">
            <div class="flex items-center mb-8">
                <div class="w-12 h-1 bg-indigo-500 mr-4"></div>
                <h2 class="text-2xl font-bold text-gray-800">OAuth是什么</h2>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <p class="text-lg mb-6">OAuth的英文全称是Open Authorization，它是一种<strong class="highlight">开放认证授权协议</strong>，要授权方和被授权方遵守这个协议去写代码提供服务，那双方就是实现了OAuth协议。</p>
                    
                    <div class="flex flex-wrap gap-4 mb-8">
                        <div class="flex-1 min-w-[200px] bg-white p-6 rounded-lg shadow-sm">
                            <div class="flex items-center mb-3">
                                <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-user-check text-indigo-600"></i>
                                </div>
                                <h3 class="font-bold">认证</h3>
                            </div>
                            <p class="text-gray-600">验证用户的身份，比如账号登录，指纹识别，人脸识别等。</p>
                        </div>
                        <div class="flex-1 min-w-[200px] bg-white p-6 rounded-lg shadow-sm">
                            <div class="flex items-center mb-3">
                                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-key text-green-600"></i>
                                </div>
                                <h3 class="font-bold">授权</h3>
                            </div>
                            <p class="text-gray-600">对用户进行访问控制，比如判断用户是否被允许做某件事情。</p>
                        </div>
                    </div>
                    
                    <div class="bg-white p-6 rounded-lg shadow-sm mb-8">
                        <h3 class="font-bold text-lg mb-4 flex items-center">
                            <i class="fas fa-code-branch text-indigo-500 mr-2"></i>
                            OAuth版本演进
                        </h3>
                        <div class="flex flex-col space-y-4">
                            <div class="flex items-start">
                                <div class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium mr-3">1.0</div>
                                <div>
                                    <p class="font-medium">2007年12月发布</p>
                                    <p class="text-gray-600 text-sm">协议过于复杂，易用性差，未得到普及</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium mr-3">2.0</div>
                                <div>
                                    <p class="font-medium">2010年4月发布</p>
                                    <p class="text-gray-600 text-sm">全新设计，协议简单清晰，被Google、Facebook等主流平台采用</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <div class="bg-white p-6 rounded-lg shadow-sm mb-8">
                        <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1706003512168-9f2efb0b-b9ca-4d8d-9693-4c8b33ce3117.png" alt="OAuth流程" class="w-full rounded-lg mb-4">
                        <p class="text-gray-600 text-sm text-center">OAuth 2.0 授权流程示意图</p>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- OAuth 2.0 Use Cases -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-1 bg-indigo-500 mr-4"></div>
                <h2 class="text-2xl font-bold text-gray-800">OAuth 2.0的作用</h2>
            </div>
            
            <div class="quote mb-8">
                <p class="font-medium">简单概括，就是用于第三方在用户授权下调取平台对外开放接口获取用户相关信息。</p>
            </div>
            
            <p class="mb-6">OAuth引入了一个授权环节来解决上述问题。第三方应用请求访问受保护资源时，资源服务器在获准资源用户授权后，会向第三方应用颁发一个访问令牌(AccessToken)。该访问令牌包含资源用户的授权访问范围、授权有效期等关键属性。第三方应用在后续资源访问过程中需要一直持有该令牌，直到用户主动结束该次授权或者令牌自动过期。</p>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                <div class="card bg-white p-6 rounded-lg">
                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-sign-in-alt text-indigo-600 text-xl"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-2">第三方登录</h3>
                    <p class="text-gray-600">允许用户使用已有账号(如微信、QQ)登录新应用，无需单独注册</p>
                </div>
                <div class="card bg-white p-6 rounded-lg">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-share-alt text-green-600 text-xl"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-2">数据共享</h3>
                    <p class="text-gray-600">安全地授权第三方应用访问用户在平台的数据(如微信授权获取用户信息)</p>
                </div>
                <div class="card bg-white p-6 rounded-lg">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-lock text-purple-600 text-xl"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-2">API保护</h3>
                    <p class="text-gray-600">为API接口提供认证授权机制，确保只有授权应用可以访问</p>
                </div>
            </div>
        </section>
        
        <!-- Authorization Modes -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-1 bg-indigo-500 mr-4"></div>
                <h2 class="text-2xl font-bold text-gray-800">OAuth 2.0的授权模式</h2>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                <div>
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <h3 class="font-bold text-lg mb-4 flex items-center">
                            <i class="fas fa-list-ol text-indigo-500 mr-2"></i>
                            五种授权模式
                        </h3>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <div class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full text-xs font-medium mr-3">1</div>
                                <div>
                                    <p class="font-medium">授权码模式 (Authorization Code)</p>
                                    <p class="text-gray-600 text-sm">最安全、最常用的模式，适用于有后端的Web应用</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full text-xs font-medium mr-3">2</div>
                                <div>
                                    <p class="font-medium">授权码简化模式 (Implicit)</p>
                                    <p class="text-gray-600 text-sm">为纯前端Web应用设计，令牌直接返回给前端</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full text-xs font-medium mr-3">3</div>
                                <div>
                                    <p class="font-medium">Pwd模式 (Resource Owner Password Credentials)</p>
                                    <p class="text-gray-600 text-sm">用户直接提供账号密码，适用于高度信任的应用</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full text-xs font-medium mr-3">4</div>
                                <div>
                                    <p class="font-medium">Client模式 (Client Credentials)</p>
                                    <p class="text-gray-600 text-sm">为后台API调用设计，应用以自己的身份而非用户身份获取令牌</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full text-xs font-medium mr-3">5</div>
                                <div>
                                    <p class="font-medium">扩展模式 (Extension)</p>
                                    <p class="text-gray-600 text-sm">自定义授权模式，满足特殊场景需求</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div>
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <h3 class="font-bold text-lg mb-4 flex items-center">
                            <i class="fas fa-project-diagram text-indigo-500 mr-2"></i>
                            核心角色
                        </h3>
                        <div class="mermaid">
                            graph LR
                            A[Resource Owner\n用户] -->|授权| B(Authorization Server\n授权服务器)
                            B -->|颁发令牌| C[Client\n第三方应用]
                            C -->|使用令牌| D(Resource Server\n资源服务器)
                        </div>
                        <div class="mt-4 grid grid-cols-2 gap-4">
                            <div class="bg-indigo-50 p-3 rounded-lg">
                                <p class="font-medium text-indigo-800">Resource Owner</p>
                                <p class="text-sm text-gray-600">资源所有者，即代表授权客户端访问本身资源信息的用户</p>
                            </div>
                            <div class="bg-indigo-50 p-3 rounded-lg">
                                <p class="font-medium text-indigo-800">Authorization Server</p>
                                <p class="text-sm text-gray-600">授权服务器，验证用户身份，然后为客户端派发资源访问令牌</p>
                            </div>
                            <div class="bg-indigo-50 p-3 rounded-lg">
                                <p class="font-medium text-indigo-800">Resource Server</p>
                                <p class="text-sm text-gray-600">资源服务器，托管受保护的用户账号信息</p>
                            </div>
                            <div class="bg-indigo-50 p-3 rounded-lg">
                                <p class="font-medium text-indigo-800">Client</p>
                                <p class="text-sm text-gray-600">客户端，即代表意图访问受限资源的第三方应用</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-white p-6 rounded-lg shadow-sm">
                <h3 class="font-bold text-lg mb-4 flex items-center">
                    <i class="fas fa-exchange-alt text-indigo-500 mr-2"></i>
                    授权流程白话解释
                </h3>
                <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651303883839-ebef8b8d-e6a9-4460-a283-ba43deceb3ee.png" alt="OAuth流程白话解释" class="w-full rounded-lg">
            </div>
        </section>
        
        <!-- Baidu Example -->
        <section id="baidu-example" class="mb-20 scroll-mt-16">
            <div class="flex items-center mb-8">
                <div class="w-12 h-1 bg-indigo-500 mr-4"></div>
                <h2 class="text-2xl font-bold text-gray-800">使用百度账号登录示例</h2>
            </div>
            
            <div class="bg-white rounded-lg shadow-sm overflow-hidden mb-8">
                <div class="p-6 border-b">
                    <h3 class="font-bold text-lg mb-4 flex items-center">
                        <i class="fab fa-baidu text-blue-600 mr-2"></i>
                        申请应用
                    </h3>
                    <ol class="list-decimal pl-5 space-y-3">
                        <li class="step">注册百度开发者账号：<a href="https://passport.baidu.com/v2/?reg&u=http%3A%2F%2Fdeveloper.baidu.com%2F&tpl=dev" class="text-indigo-600 hover:underline" target="_blank">百度Passport</a>。如果已有则忽略该步骤，直接进入第二步。</li>
                        <li class="step">登录百度开发者中心：<a href="http://developer.baidu.com/" class="text-indigo-600 hover:underline" target="_blank">百度开发者中心</a></li>
                    </ol>
                </div>
                <div class="p-6 border-b">
                    <h3 class="font-bold text-lg mb-4 flex items-center">
                        <i class="fas fa-plus-circle text-green-600 mr-2"></i>
                        创建第三方授权应用
                    </h3>
                    <ol class="list-decimal pl-5 space-y-3">
                        <li class="step">进入百度开发者控制台应用管理页面：<a href="http://developer.baidu.com/console#app/project" class="text-indigo-600 hover:underline" target="_blank">应用管理</a></li>
                        <li class="step">单击"创建工程"，开始创建应用。</li>
                    </ol>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651303910278-f9b68f6f-e399-49ea-99bd-04b889bc3770.png" alt="百度开发者中心" class="rounded-lg border">
                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651303927424-5de3f7e1-6205-434c-be67-bb910feaf902.png" alt="创建工程" class="rounded-lg border">
                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651303934119-81f20354-c52d-4684-b03f-09b35583cdd6.png" alt="应用信息" class="rounded-lg border">
                    </div>
                </div>
                <div class="p-6">
                    <h3 class="font-bold text-lg mb-4 flex items-center">
                        <i class="fas fa-sign-in-alt text-purple-600 mr-2"></i>
                        引导用户登录
                    </h3>
                    <p class="mb-4">API文档：<a href="http://developer.baidu.com/wiki/index.php?title=docs/oauth" class="text-indigo-600 hover:underline" target="_blank">百度OAuth文档</a></p>
                    
                    <div class="code-block mb-6" data-lang="http">
                        http://openapi.baidu.com/oauth/2.0/authorize?
                        response_type=code&
                        client_id=YOUR_CLIENT_ID&
                        redirect_uri=YOUR_REGISTERED_REDIRECT_URI&
                        scope=email&
                        display=popup
                    </div>
                    
                    <div class="overflow-x-auto mb-6">
                        <table class="min-w-full bg-white rounded-lg overflow-hidden">
                            <thead class="bg-gray-100">
                                <tr>
                                    <th class="py-2 px-4 text-left font-medium text-gray-700">参数名</th>
                                    <th class="py-2 px-4 text-left font-medium text-gray-700">是否必须</th>
                                    <th class="py-2 px-4 text-left font-medium text-gray-700">含义</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr>
                                    <td class="py-2 px-4">client_id</td>
                                    <td class="py-2 px-4">必须滴</td>
                                    <td class="py-2 px-4">你应用的API Key</td>
                                </tr>
                                <tr class="bg-gray-50">
                                    <td class="py-2 px-4">response_type</td>
                                    <td class="py-2 px-4">必须滴</td>
                                    <td class="py-2 px-4">必须参数，此值固定为"code"。</td>
                                </tr>
                                <tr>
                                    <td class="py-2 px-4">redirect_uri</td>
                                    <td class="py-2 px-4">必须滴</td>
                                    <td class="py-2 px-4">你应用填写的回调地址</td>
                                </tr>
                                <tr class="bg-gray-50">
                                    <td class="py-2 px-4">scope</td>
                                    <td class="py-2 px-4">非必须参数</td>
                                    <td class="py-2 px-4">授予一个应用的一系列数据访问操作权限</td>
                                </tr>
                                <tr>
                                    <td class="py-2 px-4">display</td>
                                    <td class="py-2 px-4">非必须参数</td>
                                    <td class="py-2 px-4">用来标识不同形式的客户端所对应的不同展现形式的授权页面</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-info-circle text-yellow-500"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm text-yellow-700">
                                    <strong>display参数说明：</strong>
                                    <br>page：全屏形式的授权页面(默认)，适用于web应用。
                                    <br>popup: 弹框形式的授权页面，适用于桌面软件应用和web应用。
                                    <br>dialog:浮层形式的授权页面，只能用于站内web应用。
                                    <br>mobile: Iphone/Android等智能移动终端上用的授权页面，适用于Iphone/Android等智能移动终端上的应用。
                                    <br>tv: 电视等超大显示屏使用的授权页面。
                                    <br>pad: IPad/Android等智能平板电脑使用的授权页面。
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651303948550-b1a380b1-6ff0-4d0d-96df-82617a49fa41.png" alt="授权页面" class="rounded-lg border w-full mb-6">
                    
                    <h4 class="font-bold text-lg mb-4 flex items-center">
                        <i class="fas fa-key text-orange-500 mr-2"></i>
                        获取Access Token
                    </h4>
                    
                    <div class="code-block mb-6" data-lang="http">
                        https://openapi.baidu.com/oauth/2.0/token?
                        grant_type=authorization_code&
                        code=CODE&
                        client_id=YOUR_CLIENT_ID&
                        client_secret=YOUR_CLIENT_SECRET&
                        redirect_uri=YOUR_REGISTERED_REDIRECT_URI
                    </div>
                    
                    <div class="overflow-x-auto mb-6">
                        <table class="min-w-full bg-white rounded-lg overflow-hidden">
                            <thead class="bg-gray-100">
                                <tr>
                                    <th class="py-2 px-4 text-left font-medium text-gray-700">参数名</th>
                                    <th class="py-2 px-4 text-left font-medium text-gray-700">是否必须</th>
                                    <th class="py-2 px-4 text-left font-medium text-gray-700">含义</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr>
                                    <td class="py-2 px-4">grant_type</td>
                                    <td class="py-2 px-4">必须滴</td>
                                    <td class="py-2 px-4">固定值：authorization_code</td>
                                </tr>
                                <tr class="bg-gray-50">
                                    <td class="py-2 px-4">code</td>
                                    <td class="py-2 px-4">必须滴</td>
                                    <td class="py-2 px-4">上一步所获取的code</td>
                                </tr>
                                <tr>
                                    <td class="py-2 px-4">client_id</td>
                                    <td class="py-2 px-4">必须滴</td>
                                    <td class="py-2 px-4">你应用的API Key</td>
                                </tr>
                                <tr class="bg-gray-50">
                                    <td class="py-2 px-4">client_secret</td>
                                    <td class="py-2 px-4">必须滴</td>
                                    <td class="py-2 px-4">你应用的Secret Key</td>
                                </tr>
                                <tr>
                                    <td class="py-2 px-4">redirect_uri</td>
                                    <td class="py-2 px-4">必须滴</td>
                                    <td class="py-2 px-4">你应用的回调地址</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651303956694-6a918d79-0f33-47e4-b336-25e62a1be16b.png" alt="获取Token" class="rounded-lg border w-full mb-6">
                    
                    <h4 class="font-bold text-lg mb-4 flex items-center">
                        <i class="fas fa-user-circle text-green-500 mr-2"></i>
                        查询用户信息
                    </h4>
                    
                    <div class="code-block mb-4" data-lang="http">
                        https://openapi.baidu.com/rest/2.0/passport/users/getInfo
                    </div>
                    
                    <div class="overflow-x-auto mb-6">
                        <table class="min-w-full bg-white rounded-lg overflow-hidden">
                            <thead class="bg-gray-100">
                                <tr>
                                    <th class="py-2 px-4 text-left font-medium text-gray-700">参数名称</th>
                                    <th class="py-2 px-4 text-left font-medium text-gray-700">参数类型</th>
                                    <th class="py-2 px-4 text-left font-medium text-gray-700">是否必需</th>
                                    <th class="py-2 px-4 text-left font-medium text-gray-700">描述</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr>
                                    <td class="py-2 px-4">access_token</td>
                                    <td class="py-2 px-4">string</td>
                                    <td class="py-2 px-4">是</td>
                                    <td class="py-2 px-4">OAuth2.0验证授权后获得的token。</td>
                                </tr>
                                <tr class="bg-gray-50">
                                    <td class="py-2 px-4">callback</td>
                                    <td class="py-2 px-4">string</td>
                                    <td class="py-2 px-4">否</td>
                                    <td class="py-2 px-4">你应用填写的回调地址</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651303972347-33d5f8f6-9a88-4ba3-8b3e-6fd689e20e1e.png" alt="用户信息" class="rounded-lg border w-full">
                </div>
            </div>
        </section>
        
        <!-- JustAuth Section -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-1 bg-indigo-500 mr-4"></div>
                <h2 class="text-2xl font-bold text-gray-800">JustAuth介绍</h2>
            </div>
            
            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <div class="p-6 border-b">
                    <div class="flex flex-col md:flex-row items-start">
                        <div class="md:w-2/3 mb-6 md:mb-0">
                            <h3 class="font-bold text-xl mb-4 flex items-center">
                                <i class="fas fa-heart text-red-500 mr-2"></i>
                                最简化的第三方登录工具类库
                            </h3>
                            <p class="mb-4">JustAuth，如你所见，它仅仅是一个<strong>第三方授权登录</strong>的<strong>工具类库</strong>，它可以让我们脱离繁琐的第三方登录SDK，让登录变得<strong>So easy!</strong></p>
                            <a href="https://justauth.wiki/" class="inline-flex items-center text-indigo-600 hover:underline" target="_blank">
                                <i class="fas fa-external-link-alt mr-1"></i>
                                官网地址：https://justauth.wiki/
                            </a>
                        </div>
                        <div class="md:w-1/3 bg-indigo-50 p-6 rounded-lg">
                            <h4 class="font-bold text-lg mb-3 flex items-center">
                                <i class="fas fa-star text-yellow-500 mr-2"></i>
                                JustAuth特点
                            </h4>
                            <ul class="space-y-2">
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span><strong>全</strong>：已集成十多家第三方平台（国内外常用的基本都已包含）</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span><strong>简</strong>：API设计极其简单，用起来没有障碍感</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="p-6 border-b">
                    <h3 class="font-bold text-lg mb-4 flex items-center">
                        <i class="fas fa-book text-indigo-500 mr-2"></i>
                        名词解释
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="font-medium text-gray-800">开发者</p>
                            <p class="text-sm text-gray-600">指使用JustAuth的开发者</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="font-medium text-gray-800">第三方</p>
                            <p class="text-sm text-gray-600">指开发者对接的第三方网站，比如：QQ平台、微信平台</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="font-medium text-gray-800">用户</p>
                            <p class="text-sm text-gray-600">指最终服务的真实用户</p>
                        </div>
                    </div>
                </div>
                
                <div class="p-6">
                    <h3 class="font-bold text-lg mb-4 flex items-center">
                        <i class="fas fa-key text-orange-500 mr-2"></i>
                        关键词解释
                    </h3>
                    <p class="mb-4">以下内容了解后，将会使你更容易地上手JustAuth。</p>
                    
                    <div class="overflow-x-auto">
                        <table class="min-w-full bg-white rounded-lg overflow-hidden">
                            <thead class="bg-gray-100">
                                <tr>
                                    <th class="py-2 px-4 text-left font-medium text-gray-700">关键词</th>
                                    <th class="py-2 px-4 text-left font-medium text-gray-700">说明</th>
                                    <th class="py-2 px-4 text-left font-medium text-gray-700">来源</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr>
                                    <td class="py-2 px-4 font-medium">clientId</td>
                                    <td class="py-2 px-4">客户端身份标识符（应用id）</td>
                                    <td class="py-2 px-4">由第三方平台颁发</td>
                                </tr>
                                <tr class="bg-gray-50">
                                    <td class="py-2 px-4 font-medium">clientSecret</td>
                                    <td class="py-2 px-4">客户端密钥</td>
                                    <td class="py-2 px-4">由第三方平台颁发</td>
                                </tr>
                                <tr>
                                    <td class="py-2 px-4 font-medium">redirectUri</td>
                                    <td class="py-2 px-4">开发者项目中的有效api地址</td>
                                    <td class="py-2 px-4">开发者配置</td>
                                </tr>
                                <tr class="bg-gray-50">
                                    <td class="py-2 px-4 font-medium">state</td>
                                    <td class="py-2 px-4">防止CSRF攻击的安全随机参数</td>
                                    <td class="py-2 px-4">开发者生成</td>
                                </tr>
                                <tr>
                                    <td class="py-2 px-4 font-medium">source</td>
                                    <td class="py-2 px-4">JustAuth支持的第三方平台</td>
                                    <td class="py-2 px-4">如GITHUB、GITEE等</td>
                                </tr>
                                <tr class="bg-gray-50">
                                    <td class="py-2 px-4 font-medium">UUID</td>
                                    <td class="py-2 px-4">第三方平台的用户ID</td>
                                    <td class="py-2 px-4">各平台不同，可能是unionid或openId</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mt-6">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-info-circle text-blue-500"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm text-blue-700">
                                    <strong>注意：</strong>建议通过uuid + source的方式唯一确定一个用户，这样可以解决用户身份归属的问题。因为单个用户ID在某一平台中是唯一的，但不能保证在所有平台中都是唯一的。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- JustAuth Baidu Example -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-1 bg-indigo-500 mr-4"></div>
                <h2 class="text-2xl font-bold text-gray-800">JustAuth实现百度登录</h2>
            </div>
            
            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <div class="p-6 border-b">
                    <h3 class="font-bold text-lg mb-4 flex items-center">
                        <i class="fas fa-cubes text-purple-500 mr-2"></i>
                        添加依赖
                    </h3>
                    
                    <div class="code-block mb-4" data-lang="xml">
                        <dependency>
                            <groupId>me.zhyd.oauth</groupId>
                            <artifactId>JustAuth</artifactId>
                            <version>1.16.1</version>
                        </dependency>
                        
                        <dependency>
                            <groupId>cn.hutool</groupId>
                            <artifactId>hutool-http</artifactId>
                            <version>5.1.0</version>
                            <scope>provided</scope>
                        </dependency>
                    </div>
                    
                    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-exclamation-triangle text-yellow-500"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm text-yellow-700">
                                    <strong>注意：</strong>使用第三方登录的时候需要注意，如果浏览器已经在第三方平台登录过了，在此登录自己的系统会直接进入，不会在进入到授权页面。如果想每次看到授权页面需要注销掉之前的登录。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="p-6">
                    <h3 class="font-bold text-lg mb-4 flex items-center">
                        <i class="fas fa-code text-indigo-500 mr-2"></i>
                        示例代码
                    </h3>
                    
                    <div class="code-block mb-6" data-lang="java">
                        @Controller
                        public class JustAutoController {
                        
                            @RequestMapping("/render")
                            public void renderAuth(HttpServletResponse response) throws IOException {
                                System.out.println("loign....");
                                AuthRequest authRequest = getAuthRequest();
                                String authorize = authRequest.authorize(AuthStateUtils.createState());
                                System.out.println(authorize);
                                response.sendRedirect(authorize);
                            }
                        
                            @RequestMapping("/callback")
                            @ResponseBody
                            public Object login(AuthCallback callback) {
                                System.out.println("callback:code:" + callback.getCode() + ",state:" + callback.getState());
                                AuthRequest authRequest = getAuthRequest();
                                AuthResponse authResp = authRequest.login(callback);
                        
                                if (authResp.ok()) {
                                    AuthUser data = (AuthUser) authResp.getData();
                                    String username = data.getUsername();
                                    System.out.println(username);
                                    return username;
                                }else{
                                    return "登录失败，跳转到登录页面";
                                }
                                return "callback";
                            }
                        
                            private AuthRequest getAuthRequest() {
                                return new AuthBaiduRequest(AuthConfig.builder()
                                        .clientId("IVh2e8u6rNd9Xx5r29UGwB3P")
                                        .clientSecret("qqufMxlAmHtgCGtscDr9NS2D5OtYbdxM")
                                        .redirectUri("http://localhost:8080/callback")
                                        .scopes(Arrays.asList(AuthBaiduScope.SUPER_MSG.getScope()))
                                        .build());
                            }
                        }
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="bg-indigo-50 p-4 rounded-lg">
                            <h4 class="font-bold mb-2 flex items-center">
                                <i class="fas fa-sign-in-alt text-indigo-500 mr-2"></i>
                                /render端点
                            </h4>
                            <p class="text-sm text-gray-600">初始化授权请求，将用户重定向到第三方登录页面</p>
                        </div>
                        <div class="bg-indigo-50 p-4 rounded-lg">
                            <h4 class="font-bold mb-2 flex items-center">
                                <i class="fas fa-redo text-indigo-500 mr-2"></i>
                                /callback端点
                            </h4>
                            <p class="text-sm text-gray-600">处理第三方回调，完成登录流程</p>
                        </div>
                        <div class="bg-indigo-50 p-4 rounded-lg">
                            <h4 class="font-bold mb-2 flex items-center">
                                <i class="fas fa-cog text-indigo-500 mr-2"></i>
                                getAuthRequest
                            </h4>
                            <p class="text-sm text-gray-600">配置百度OAuth应用的参数</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```